<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>JavaScript数组方法总结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="JavaScript,">
  

  <meta name="description" content="一、数组预览图 二、会改变原数组的方法2.1 push() 方法在数组的尾部添加一个或多个元素，并返回数组的长度   参数: item1, item2, …, itemX ,要添加到数组末尾的元素  let arr = [1,2,3];let length = arr.push(&apos;末尾1&apos;,&apos;末尾2&apos;); // 返回数组长度console.log(arr,length)// [1, 2, 3, &quot;">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript数组方法总结篇">
<meta property="og:url" content="http://blog.poetries.top/2018/08/18/javaScript-arr-summary/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="一、数组预览图 二、会改变原数组的方法2.1 push() 方法在数组的尾部添加一个或多个元素，并返回数组的长度   参数: item1, item2, …, itemX ,要添加到数组末尾的元素  let arr = [1,2,3];let length = arr.push(&apos;末尾1&apos;,&apos;末尾2&apos;); // 返回数组长度console.log(arr,length)// [1, 2, 3, &quot;">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/1480597-3067afe2cc23ff1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2020-08-15T04:25:31.922Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript数组方法总结篇">
<meta name="twitter:description" content="一、数组预览图 二、会改变原数组的方法2.1 push() 方法在数组的尾部添加一个或多个元素，并返回数组的长度   参数: item1, item2, …, itemX ,要添加到数组末尾的元素  let arr = [1,2,3];let length = arr.push(&apos;末尾1&apos;,&apos;末尾2&apos;); // 返回数组长度console.log(arr,length)// [1, 2, 3, &quot;">
<meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/1480597-3067afe2cc23ff1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#一、数组预览图"><span class="toc-text">一、数组预览图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二、会改变原数组的方法"><span class="toc-text">二、会改变原数组的方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-push"><span class="toc-text">2.1 push()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2-pop"><span class="toc-text">2.2  pop()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-unshift"><span class="toc-text">2.3 unshift()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-4-shift"><span class="toc-text">2.4  shift()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-5-splice"><span class="toc-text">2.5 splice()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-6-sort"><span class="toc-text">2.6 sort()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-reverse"><span class="toc-text">2.7  reverse()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-8-fill"><span class="toc-text">2.8 fill()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三、不改变原数组的方法"><span class="toc-text">三、不改变原数组的方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-slice"><span class="toc-text">3.1 slice()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-join"><span class="toc-text">3.2  join()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-toString"><span class="toc-text">3.3 toString()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-4-toLocaleString"><span class="toc-text">3.4  toLocaleString()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-5-concat"><span class="toc-text">3.5  concat()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-isArray"><span class="toc-text">3.6 isArray()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#四、数组遍历、映射、过滤、检测、简化等方法"><span class="toc-text">四、数组遍历、映射、过滤、检测、简化等方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-1-forEach"><span class="toc-text">4.1 forEach()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-2-map"><span class="toc-text">4.2 map()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-filter"><span class="toc-text">4.3 filter()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-4-every"><span class="toc-text">4.4 every()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5-some"><span class="toc-text">4.5 some()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-6-reduce-和-reduceRight"><span class="toc-text">4.6 reduce() 和 reduceRight()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-7-indexof"><span class="toc-text">4.7  indexof()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-8-includes"><span class="toc-text">4.8 includes()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-9-find-和-findIndex"><span class="toc-text">4.9 find() 和 findIndex()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-10-其他"><span class="toc-text">4.10 其他</span></a></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-javaScript-arr-summary" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">JavaScript数组方法总结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2018.08.18</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 4.9k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 21分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h3 id="一、数组预览图"><a href="#一、数组预览图" class="headerlink" title="一、数组预览图"></a>一、数组预览图</h3><p><img src="https://upload-images.jianshu.io/upload_images/1480597-3067afe2cc23ff1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="数组方法"></p>
<h3 id="二、会改变原数组的方法"><a href="#二、会改变原数组的方法" class="headerlink" title="二、会改变原数组的方法"></a>二、会改变原数组的方法</h3><h4 id="2-1-push"><a href="#2-1-push" class="headerlink" title="2.1 push()"></a>2.1 push()</h4><ul>
<li>方法在数组的尾部添加一个或多个元素，并返回数组的长度</li>
</ul>
<blockquote>
<p>参数: item1, item2, …, itemX ,要添加到数组末尾的元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> length = arr.push(<span class="string">'末尾1'</span>,<span class="string">'末尾2'</span>); <span class="comment">// 返回数组长度</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr,length)</span><br><span class="line"></span><br><span class="line"><span class="comment">// [1, 2, 3, "末尾1", "末尾2"] 5</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 数组的长度</p>
</blockquote>
<h4 id="2-2-pop"><a href="#2-2-pop" class="headerlink" title="2.2  pop()"></a>2.2  pop()</h4><ul>
<li>方法删除数组的最后一个元素，减小数组长度并返回它删除的值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//组合使用push()和pop()能够用JavaScript数组实现先进后出的栈</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> stack = [];</span><br><span class="line"></span><br><span class="line">stack.push(<span class="number">1</span>,<span class="number">2</span>) <span class="comment">// 返回长度2，这时stack的值是[1,2]</span></span><br><span class="line"></span><br><span class="line">stack.pop() <span class="comment">// 返回删除的值2，这时stack的值是[1]</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 从数组中删除的元素(当数组为空时返回undefined)。</p>
</blockquote>
<h4 id="2-3-unshift"><a href="#2-3-unshift" class="headerlink" title="2.3 unshift()"></a>2.3 unshift()</h4><blockquote>
<p>方法在数组的头部添加一个或多个元素，并将已存在的元素移动到更高索引的位置来获得足够的空间，最后返回数组新的长度</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> length = arr.unshift(<span class="number">1</span>,<span class="number">2</span>); <span class="comment">// 返回长度是5</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr, length)</span><br><span class="line"></span><br><span class="line"><span class="comment">//[1, 2, 3, 4, 5] 5</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 返回数组新的长度</p>
</blockquote>
<h4 id="2-4-shift"><a href="#2-4-shift" class="headerlink" title="2.4  shift()"></a>2.4  shift()</h4><blockquote>
<p>方法删除数组的第一个元素并将其返回，然后把所有随后的元素下移一个位置来填补数组头部的空缺，返回值是删除的元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> item = arr.shift(); <span class="comment">// 返回删除的值1</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr, item)</span><br><span class="line"></span><br><span class="line"><span class="comment">// [2, 3] 1</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 从数组中删除的元素; 如果数组为空则返回undefined</p>
</blockquote>
<h4 id="2-5-splice"><a href="#2-5-splice" class="headerlink" title="2.5 splice()"></a>2.5 splice()</h4><blockquote>
<p>方法是在数组中插入或删除元素的通用方法</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// start不超过数组长度(以下操作是连续的)</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">2</span>) <span class="comment">// arr是[1,2]，返回值是[3,4,5]</span></span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">1</span>,<span class="number">1</span>) <span class="comment">// arr是[1]，返回值是[2]</span></span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">0</span>,<span class="number">3</span>) <span class="comment">// arr是[]，返回值是[1],因为此时数组从第0位开始不够3位，所以是删除从0开始到最后的所有元素。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// start大于数组长度(以下操作是连续的)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">5</span>) <span class="comment">// arr是[1,2,3,4,5]，返回值是[]</span></span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">5</span>,<span class="number">3</span>,<span class="number">6</span>) <span class="comment">// arr是[1,2,3,4,5,6]，返回值是[]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">5</span>,<span class="number">3</span>,<span class="number">7</span>) <span class="comment">// arr是[1,2,3,4,5,7] 返回值是[6]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// start是负数(以下操作是连续的)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">-3</span>,<span class="number">2</span>); <span class="comment">// arr是[1,2,5], 返回值是[3,4]</span></span><br><span class="line">arr.splice(<span class="number">-4</span>); <span class="comment">// arr是[],返回值是[1,2,5]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 插入数组时，是插入数组本身，而不是数组元素</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line">arr.splice(<span class="number">1</span>,<span class="number">0</span>,[<span class="number">2</span>,<span class="number">3</span>]) <span class="comment">// arr是[1,[2,3],4,5]，返回值是[]</span></span><br></pre></td></tr></table></figure>
<h4 id="2-6-sort"><a href="#2-6-sort" class="headerlink" title="2.6 sort()"></a>2.6 sort()</h4><blockquote>
<p><code>sort()</code> 方法将数组中的元素排序并返回排序后的数组</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> stringArray = [<span class="string">"Blue"</span>, <span class="string">"Humpback"</span>, <span class="string">"Beluga"</span>];</span><br><span class="line"><span class="keyword">var</span> numberArray = [<span class="number">40</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">200</span>];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">compareNumbers</span>(<span class="params">a, b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a - b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'stringArray:'</span> + stringArray.join());</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'Sorted:'</span> + stringArray.sort());</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'numberArray:'</span> + numberArray.join());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 没有使用比较函数时，数字并不会按照我们设想的那样排序</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'Sorted without a compare function:'</span>+ numberArray.sort());</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'Sorted with compareNumbers:'</span>+ numberArray.sort(compareNumbers));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//打印如下</span></span><br><span class="line"><span class="comment">// stringArray: Blue,Humpback,Beluga</span></span><br><span class="line"><span class="comment">// Sorted: Beluga,Blue,Humpback</span></span><br><span class="line"><span class="comment">// numberArray: 40,1,5,200</span></span><br><span class="line"><span class="comment">// Sorted without a compare function: 1,200,40,5</span></span><br><span class="line"><span class="comment">// Sorted with compareNumbers: 1,5,40,200</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 返回排序后的数组。原数组已经被排序后的数组代替</p>
</blockquote>
<h4 id="2-7-reverse"><a href="#2-7-reverse" class="headerlink" title="2.7  reverse()"></a>2.7  reverse()</h4><blockquote>
<p>方法将数组中的元素颠倒顺序，返回逆序的数组</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line">arr.reverse() <span class="comment">// arr是[3,2,1]，返回值是[3,2,1]</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 返回顺序颠倒后的数组。原数组已经被排序后的数组代替</p>
</blockquote>
<h4 id="2-8-fill"><a href="#2-8-fill" class="headerlink" title="2.8 fill()"></a>2.8 fill()</h4><blockquote>
<p>方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">arr.fill(value[, start[, end]])</span><br></pre></td></tr></table></figure>
<ul>
<li><code>value</code> 用来填充数组元素的值。</li>
<li><code>start</code> (可选) 起始索引，默认值为0。</li>
<li><code>end</code> (可选) 终止索引，默认值为 this.length。</li>
<li>如果 start 是个负数, 则开始索引会被自动计算成为 <code>length+start</code>, 其中 length 是 this 对象的 <code>length</code>属性值. 如果 end 是个负数, 则结束索引会被自动计算成为 <code>length+end</code></li>
</ul>
<blockquote>
<p>返回值： 修改后的数组</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>); <span class="comment">// [4, 4, 4]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="number">1</span>); <span class="comment">// [1, 4, 4]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="number">1</span>, <span class="number">2</span>); <span class="comment">// [1, 4, 3]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="number">1</span>, <span class="number">1</span>); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="number">3</span>, <span class="number">3</span>); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="number">-3</span>, <span class="number">-2</span>); <span class="comment">// [4, 2, 3]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="literal">NaN</span>, <span class="literal">NaN</span>); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="number">3</span>, <span class="number">5</span>); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>(<span class="number">3</span>).fill(<span class="number">4</span>); <span class="comment">// [4, 4, 4]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。</span></span><br><span class="line"></span><br><span class="line">[].fill.call(&#123; <span class="attr">length</span>: <span class="number">3</span> &#125;, <span class="number">4</span>); <span class="comment">// &#123;0: 4, 1: 4, 2: 4, length: 3&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="三、不改变原数组的方法"><a href="#三、不改变原数组的方法" class="headerlink" title="三、不改变原数组的方法"></a>三、不改变原数组的方法</h3><h4 id="3-1-slice"><a href="#3-1-slice" class="headerlink" title="3.1 slice()"></a>3.1 slice()</h4><blockquote>
<p>方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改</p>
</blockquote>
<ul>
<li>返回值： 一个含有提取元素的新数组</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr1 = arr.slice(<span class="number">1</span>,<span class="number">3</span>); <span class="comment">// arr是[1,2,3,4,5]， arr1是[2,3]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr2 = arr.slice(<span class="number">-2</span>,<span class="number">-1</span>); <span class="comment">// arr是[1,2,3,4,5], arr2是[4]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 开始位置在结束位置后面，得到的数组是空</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr3 = arr.slice(<span class="number">-2</span>, <span class="number">-3</span>); <span class="comment">// arr是[1,2,3,4,5], arr3是[]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr4 = arr.slice(<span class="number">2</span>, <span class="number">1</span>); <span class="comment">// arr是[1,2,3,4,5], arr4是[]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [&#123;<span class="attr">name</span>: <span class="string">'xiaoming'</span>&#125;];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr1 = arr.slice(); <span class="comment">// arr是[&#123;name: xiaoming&#125;]，arr1是[&#123;name: 'xiaoming'&#125;]</span></span><br><span class="line"></span><br><span class="line">arr1[<span class="number">0</span>].name = <span class="string">'xiaogang'</span>; <span class="comment">// arr是[&#123;name: 'xiaogang'&#125;]，arr1是[&#123;name: 'xiaogang'&#125;]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr1 = arr.slice(); <span class="comment">// arr是[1,2,3]，arr1是[1,2,3]</span></span><br><span class="line"></span><br><span class="line">arr1[<span class="number">1</span>] = <span class="string">"two"</span>; <span class="comment">// arr是[1,2,3]，arr1是[1,"tow",3]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 当然，如果向两个数组任一中添加了新元素（简单或者引用类型），则另一个不会受到影响</span></span><br></pre></td></tr></table></figure>
<h4 id="3-2-join"><a href="#3-2-join" class="headerlink" title="3.2  join()"></a>3.2  join()</h4><blockquote>
<p>方法将数组（或一个类数组对象）中所有元素都转化为字符串并连接在一起，返回最后生成的字符串</p>
</blockquote>
<ul>
<li>返回值： 一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> num = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str1 = num.join(); <span class="comment">// 1,2,3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str2 = num.join(<span class="string">', '</span>) <span class="comment">// 1, 2, 3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str3 = num.join(<span class="string">''</span>) <span class="comment">// 123</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null， 则会转化成空字符串。</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num = [<span class="number">1</span>,<span class="literal">null</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> str1 = num.join(); <span class="comment">// 1,,3</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果数组中的元素是数组，会将里面的数组也调用join()</span></span><br><span class="line"><span class="keyword">let</span> num = [[<span class="number">1</span>,<span class="number">2</span>],<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str1 = num.join(<span class="string">'-'</span>); <span class="comment">// 1,2-3</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果数组中的元素是对象，对象会被转为[object Object]字符串</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num = [&#123;<span class="attr">num</span>: <span class="number">1</span>&#125;,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str1 = num.join(<span class="string">'-'</span>); <span class="comment">// [object Object]-2-3</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 扁平化简单的二维数组</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">11</span>, [<span class="number">22</span>, <span class="number">33</span>], [<span class="number">44</span>, <span class="number">55</span>], <span class="number">66</span>];</span><br><span class="line"><span class="keyword">const</span> flatArr = arr.join().split(<span class="string">','</span>); <span class="comment">// ["11", "22", "33", "44", "55", "66"]</span></span><br></pre></td></tr></table></figure>
<h4 id="3-3-toString"><a href="#3-3-toString" class="headerlink" title="3.3 toString()"></a>3.3 toString()</h4><blockquote>
<p>方法将数组的每个元素转化为字符串(如有必要将调用元素的<code>toString()</code>方法)并且输出用逗号分割的字符串列表。返回一个字符串表示数组中的元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].toString(); <span class="comment">// 1,2,3</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,[<span class="number">2</span>,<span class="string">'c'</span>]].toString(); <span class="comment">//1,2,c</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 以上与不使用任何参数调用join()方法返回的字符串是一样的。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 以下的这个例子要跟下面的toLocaleString对照看</span></span><br><span class="line"></span><br><span class="line">[&#123;<span class="attr">a</span>:<span class="number">1</span>&#125;,<span class="number">1</span>,<span class="keyword">new</span> <span class="built_in">Date</span>()].toString() <span class="comment">//"[object Object],1,Sat Jul 07 2018 18:43:45 GMT+0800 (中国标准时间)"</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意： 当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[1,2,3]+&apos;abc&apos; //1,2,3abc</span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 返回一个字符串表示数组中的元素</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 扁平化简单的二维数组</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">11</span>, [<span class="number">22</span>, <span class="number">33</span>], [<span class="number">44</span>, <span class="number">55</span>], <span class="number">66</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> flatArr = arr.toString().split(<span class="string">','</span>); <span class="comment">// ["11", "22", "33", "44", "55", "66"]</span></span><br></pre></td></tr></table></figure>
<h4 id="3-4-toLocaleString"><a href="#3-4-toLocaleString" class="headerlink" title="3.4  toLocaleString()"></a>3.4  toLocaleString()</h4><blockquote>
<p>数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//数组中的元素将会使用各自的 toLocaleString 方法：</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object: Object.prototype.toLocaleString()</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Number: Number.prototype.toLocaleString()</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Date: Date.prototype.toLocaleString()</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> prices = [<span class="string">'￥7'</span>, <span class="number">500</span>, <span class="number">8123</span>, <span class="number">12</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不带参数</span></span><br><span class="line"></span><br><span class="line">prices.toLocaleString(); <span class="comment">// "￥7,500,8,123,12"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//带参数</span></span><br><span class="line"></span><br><span class="line">prices.toLocaleString(<span class="string">'ja-JP'</span>, &#123; <span class="attr">style</span>: <span class="string">'currency'</span>, <span class="attr">currency</span>: <span class="string">'JPY'</span> &#125;); <span class="comment">// "￥7,500,8,123,12"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//MDN上的举例中说是 "￥7,￥500,￥8,123,￥12"，在浏览器和Node中验证了返回的都是 "￥7,500,8,123,12" 啊！</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 以下的这个例子要跟上面的toString对照看</span></span><br><span class="line"></span><br><span class="line">[&#123;<span class="attr">a</span>:<span class="number">1</span>&#125;,<span class="number">1</span>,<span class="keyword">new</span> <span class="built_in">Date</span>()].toLocaleString() <span class="comment">//"[object Object],1,2018/7/7 下午6:45:00"</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回值： 表示数组元素的字符串</p>
</blockquote>
<h4 id="3-5-concat"><a href="#3-5-concat" class="headerlink" title="3.5  concat()"></a>3.5  concat()</h4><blockquote>
<p>它的元素包括调用concat()的原始数组的元素和concat()的每个参数，但是要注意，concat()不会递归扁平化数组的数组，concat()也不会修改调用的数组</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].concat([<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>],[<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>]) <span class="comment">// [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span><br><span class="line"></span><br><span class="line">[<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>].concat(<span class="number">1</span>,[<span class="number">2</span>,<span class="number">3</span>],[[<span class="number">4</span>,<span class="number">5</span>]]) <span class="comment">// ["a", "b", "c", 1, 2, 3, [4,5]]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝,所以原始数组和新数组都引用相同的对象。 如果引用的对象被修改，新数组和原始数组都会变。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>: <span class="number">1</span>&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">2</span>,obj];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">1</span>].concat(arr1);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr1,arr2) <span class="comment">//[2,&#123;a:1&#125;],[1,2,&#123;a:1&#125;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//记录下上面的打印结果之后修改obj</span></span><br><span class="line"></span><br><span class="line">obj.a = <span class="number">2</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arr1,arr2) <span class="comment">////[2,&#123;a:2&#125;],[1,2,&#123;a:2&#125;]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 说了是浅拷贝，而且原数组也不改变，那我们就可以用它来实现数组的浅拷贝功能</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//第一种</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num2 = num1.concat();</span><br><span class="line"></span><br><span class="line"><span class="comment">//第二种</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num2 = [].concat(num1);</span><br><span class="line">num2[<span class="number">0</span>] = <span class="string">'a'</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(num1,num2); <span class="comment">// [1, 2, 3] ["a", 2, 3]</span></span><br></pre></td></tr></table></figure>
<h4 id="3-6-isArray"><a href="#3-6-isArray" class="headerlink" title="3.6 isArray()"></a>3.6 isArray()</h4><blockquote>
<p>用于确定传递的值是否是一个 Array</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 下面的函数调用都返回 true</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray([]);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray([<span class="number">1</span>]);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="keyword">new</span> <span class="built_in">Array</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里注意：Array.prototype 也是一个数组,一个属性值不是索引的数组。[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="built_in">Array</span>.prototype);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 下面的函数调用都返回 false</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray();</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(&#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="literal">undefined</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="number">17</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="string">'Array'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(<span class="literal">false</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.isArray(&#123; <span class="attr">__proto__</span>: <span class="built_in">Array</span>.prototype &#125;);</span><br></pre></td></tr></table></figure>
<h3 id="四、数组遍历、映射、过滤、检测、简化等方法"><a href="#四、数组遍历、映射、过滤、检测、简化等方法" class="headerlink" title="四、数组遍历、映射、过滤、检测、简化等方法"></a>四、数组遍历、映射、过滤、检测、简化等方法</h3><h4 id="4-1-forEach"><a href="#4-1-forEach" class="headerlink" title="4.1 forEach()"></a>4.1 forEach()</h4><blockquote>
<p>方法从头到尾遍历数组，为每个元素调用指定的函数</p>
</blockquote>
<ul>
<li><code>callback</code> 为数组中每个元素执行的函数，该函数接收三个参数</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 1、 空元素不遍历,undefined和null是会遍历的。</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> numberArr = [<span class="number">1</span>,<span class="number">2</span>,,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line">numberArr.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value,index,array</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value,index,array)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//打印信息如下，可见空元素是不会遍历的</span></span><br><span class="line"><span class="comment">//1 0 [1, 2, empty, 3]</span></span><br><span class="line"><span class="comment">//2 1 [1, 2, empty, 3]</span></span><br><span class="line"><span class="comment">//3 3 [1, 2, empty, 3]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> nullArr = [<span class="number">1</span>,<span class="number">2</span>,<span class="literal">null</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line">nullArr.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value,index,array</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value,index,array)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//打印信息如下，null是会遍历的</span></span><br><span class="line"><span class="comment">//1 0 (4) [1, 2, null, 3]</span></span><br><span class="line"><span class="comment">//2 1 (4) [1, 2, null, 3]</span></span><br><span class="line"><span class="comment">//null 2 (4) [1, 2, null, 3]</span></span><br><span class="line"><span class="comment">//3 3 (4) [1, 2, null, 3]</span></span><br><span class="line"><span class="comment">//2、已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了,之后的元素将被跳过</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> numberArr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">numberArr.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value,index,array</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(index === <span class="number">0</span>) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">delete</span> numberArr[<span class="number">2</span>]; <span class="comment">//删除第三项</span></span><br><span class="line">    <span class="comment">//或者numberArr.pop()</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(value,index,array)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//打印信息如下：</span></span><br><span class="line"><span class="comment">// 1 0 (3) [1, 2, empty]</span></span><br><span class="line"><span class="comment">// 2 1 (3) [1, 2, empty]</span></span><br><span class="line"><span class="keyword">let</span> numberArr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">numberArr1.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value,index,array</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(index === <span class="number">1</span>) &#123;</span><br><span class="line">    numberArr1.shift() <span class="comment">//遍历到第二项的时候，删除第一项</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(value,index,array)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印信息如下,遍历到第二项的时候，删除第一项，会跳过第三项</span></span><br><span class="line"><span class="comment">// 1 0 (4) [1, 2, 3, 4]</span></span><br><span class="line"><span class="comment">// 2 1 (3) [2, 3, 4]</span></span><br><span class="line"><span class="comment">// 4 2 (3) [2, 3, 4]</span></span><br><span class="line"><span class="comment">// 3、forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value,index,array</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(index === <span class="number">0</span>) &#123;</span><br><span class="line">        arr.push(<span class="string">'新增的不会被遍历到'</span>)</span><br><span class="line">        arr[<span class="number">2</span>] = <span class="number">4</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(value,index,array)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1 0 (4) [1, 2, 4, "新增的不会被遍历到"]</span></span><br><span class="line"><span class="comment">// 2 1 (4) [1, 2, 4, "新增的不会被遍历到"]</span></span><br><span class="line"><span class="comment">// 4 2 (4) [1, 2, 4, "新增的不会被遍历到"]</span></span><br><span class="line"><span class="comment">// 4、使用thisArg参数 和 箭头函数使用thisArg</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">arr</span>: <span class="string">'thisArg'</span>&#125;</span><br><span class="line"></span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.arr)</span><br><span class="line">&#125;,obj)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印三次 'thisArg'</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">arr</span>: <span class="string">'thisArg'</span>&#125;</span><br><span class="line">arr.forEach(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.arr)</span><br><span class="line">&#125;,obj)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印三次 undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、forEach无法中途退出循环，只能用return退出本次回调，进行下一次回调</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = arr.forEach(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span>(value == <span class="number">2</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> value;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(value)</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(result) <span class="comment">// undefined ，即使中间return vlaue，也还是undefined</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//打印value的值如下，说明return 并不能终止循环</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 3</span></span><br></pre></td></tr></table></figure>
<h4 id="4-2-map"><a href="#4-2-map" class="headerlink" title="4.2 map()"></a>4.2 map()</h4><blockquote>
<p>方法创建一个新数组，其结果是该数组中的每个元素都调用一个callback函数后返回的结果</p>
</blockquote>
<ul>
<li>返回值： 一个新数组，每个元素都是回调函数的结果</li>
<li>不要用 <code>map</code> 代替 <code>forEach</code>,<code>map</code> 会创建一个新的数组，占用内存。如果你不用 <code>map</code> 的返回值，那你就应当使用 <code>forEach</code></li>
</ul>
<h4 id="4-3-filter"><a href="#4-3-filter" class="headerlink" title="4.3 filter()"></a>4.3 filter()</h4><ul>
<li>方法返回的数组元素是调用的数组的一个子集。传入的函数时用来逻辑判定的，该函数返回 true 或 false,如果返回值为true或能转化为true的值，那么传递给判断函数的元素就是这个子集的成员，它将被添加倒一个作为返回值的数组中</li>
<li>返回值： 一个新的通过测试的元素的集合的数组，如果没有通过测试则返回空数组</li>
</ul>
<h4 id="4-4-every"><a href="#4-4-every" class="headerlink" title="4.4 every()"></a>4.4 every()</h4><blockquote>
<p>方法测试数组的所有元素是否都通过了指定函数的测试。当且仅当针对数组中的所有元素调用判定函数都返回true，它才返回true。</p>
</blockquote>
<ul>
<li>空数组上调用every方法，返回 true，因为空数组没有元素，所以空数组中所有元素都符合给定的条件</li>
<li>返回值： 一个布尔值，当所有的元素都符合条件才返回true，否则返回false</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">12</span>,<span class="number">34</span>,<span class="number">5</span>,<span class="number">23</span>,<span class="number">44</span>];</span><br><span class="line"><span class="keyword">let</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> result = arr.every(<span class="function"><span class="keyword">function</span> (<span class="params">element, index, array</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    num++;</span><br><span class="line">    <span class="keyword">return</span> element &gt; <span class="number">10</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(result,num) <span class="comment">// 打印 false 3</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可见发现5这个小于10的元素后，遍历立即终止，num为3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">12</span>,<span class="number">34</span>,,<span class="number">23</span>,<span class="number">44</span>];</span><br><span class="line"><span class="keyword">let</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">let</span> result = arr.every(<span class="function"><span class="keyword">function</span> (<span class="params">element, index, array</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">num++;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> element &gt; <span class="number">10</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(result,num) <span class="comment">// 打印 true 4</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 不会遍历没有赋值的索引位置，所以num为4</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = [].every(<span class="function"><span class="keyword">function</span> (<span class="params">element, index, array</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> element &gt; <span class="number">10</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(result) <span class="comment">// 打印 true</span></span><br></pre></td></tr></table></figure>
<h4 id="4-5-some"><a href="#4-5-some" class="headerlink" title="4.5 some()"></a>4.5 some()</h4><blockquote>
<p>方法测试数组中的某些元素是否通过由提供的函数实现的测试。当数组中至少有一个元素调用判定函数返回true，它就返回true，当且仅当数组中的所有元素调用判定函数都返回false，它才返回false</p>
</blockquote>
<ul>
<li>空数组调用some，返回false</li>
<li>返回值： 只要数组中的任意一个元素在回调函数中返回的是真值，就返回true，否则为false</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 一个简单的例子说明</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isBiggerThan10</span>(<span class="params">element, index, array</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(index)</span><br><span class="line">    <span class="keyword">return</span> element &gt; <span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">[<span class="number">2</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">1</span>, <span class="number">4</span>].some(isBiggerThan10); <span class="comment">// 返回值是false，打印的index是0,1,2,3,4</span></span><br><span class="line"></span><br><span class="line">[<span class="number">12</span>, <span class="number">5</span>, <span class="number">8</span>, <span class="number">1</span>, <span class="number">4</span>].some(isBiggerThan10); <span class="comment">// 返回值是true，打印的index是0，找到符合元素之后立即返回</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 实现一个跟includes方法类似的功能</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">include</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> arr.some(<span class="function">(<span class="params">element</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> element === value</span><br><span class="line">&#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">include(<span class="number">2</span>) <span class="comment">// true</span></span><br><span class="line">include(<span class="number">4</span>) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = [].some(<span class="function"><span class="keyword">function</span> (<span class="params">element, index, array</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> element &gt; <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(result) <span class="comment">// 打印 false</span></span><br></pre></td></tr></table></figure>
<h4 id="4-6-reduce-和-reduceRight"><a href="#4-6-reduce-和-reduceRight" class="headerlink" title="4.6 reduce() 和 reduceRight()"></a>4.6 reduce() 和 reduceRight()</h4><blockquote>
<p>这两个方法使用指定的函数将数组元素进行组合，生成单个值。这在函数式编程中是常见的操作，也可以称为“注入”和“折叠”。reduceRight() 和 reduce() 工作原理是一样的，不同的是reduceRight() 按照数组索引从高到低（从右到左）处理数组，而不是从低到高</p>
</blockquote>
<ul>
<li>如果数组为空且没有提供initialValue，会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行</li>
<li>返回值： 函数累计处理的结果</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> sum = arr.reduce(<span class="function">(<span class="params">x,y</span>) =&gt;</span> x + y,<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum) <span class="comment">// 15</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 看一下initialValue传和不传的区别</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"></span><br><span class="line">arr.reduce(<span class="function"><span class="keyword">function</span> (<span class="params">accumulator,currentValue,currentIndex,arr</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(currentIndex)</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> accumulator + currentValue;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1,2,3,4,5 没传入initialValue，索引是从1开始</span></span><br><span class="line"></span><br><span class="line">arr.reduce(<span class="function"><span class="keyword">function</span> (<span class="params">accumulator,currentValue,currentIndex,arr</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(currentIndex)</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> accumulator + currentValue;</span><br><span class="line">&#125;,<span class="number">10</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 0,1,2,3,4,5 传入initialValue，索引从0开始</span></span><br><span class="line"><span class="comment">// 应用到二维数组展开</span></span><br><span class="line"><span class="keyword">let</span> arr = [[<span class="number">0</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>]].reduce(</span><br><span class="line">    (a, b) =&gt; a.concat(b)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr)</span><br><span class="line"><span class="comment">// [0, 1, 2, 3, 4, 5]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-7-indexof"><a href="#4-7-indexof" class="headerlink" title="4.7  indexof()"></a>4.7  indexof()</h4><blockquote>
<p>方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1</p>
</blockquote>
<ul>
<li>注意： <code>indexOf</code> 使用严格相等（即 <code>===</code>）比较 <code>searchElement</code> 和数组中的元素。而且<code>indexOf()</code>不能识别 <code>NaN</code></li>
<li>返回值： 首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> array = [<span class="number">2</span>, <span class="number">5</span>, <span class="number">9</span>];</span><br><span class="line">array.indexOf(<span class="number">2</span>) <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line">array.indexOf(<span class="number">7</span>) <span class="comment">// -1</span></span><br><span class="line">array.indexOf(<span class="number">9</span>, <span class="number">2</span>) <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line">array.indexOf(<span class="number">9</span>, <span class="number">3</span>) <span class="comment">// -1</span></span><br><span class="line"></span><br><span class="line">array.indexOf(<span class="number">2</span>, <span class="number">-1</span>) <span class="comment">// -1</span></span><br><span class="line"></span><br><span class="line">array.indexOf(<span class="number">2</span>, <span class="number">-3</span>) <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line">array.indexOf(<span class="number">2</span>, <span class="number">-4</span>) <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> array1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="literal">NaN</span>];</span><br><span class="line"></span><br><span class="line">array1.indexOf(<span class="literal">NaN</span>) <span class="comment">// -1</span></span><br></pre></td></tr></table></figure>
<h4 id="4-8-includes"><a href="#4-8-includes" class="headerlink" title="4.8 includes()"></a>4.8 includes()</h4><blockquote>
<p>方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。 ES7新增</p>
</blockquote>
<ul>
<li>返回值： 一个布尔值，根据情况，如果包含则返回 true，否则返回false</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].includes(<span class="number">2</span>); <span class="comment">// true</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].includes(<span class="number">4</span>); <span class="comment">// false</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].includes(<span class="number">3</span>, <span class="number">3</span>); <span class="comment">// false</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].includes(<span class="number">3</span>, <span class="number">-1</span>); <span class="comment">// true</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].includes(<span class="number">3</span>, <span class="number">-4</span>); <span class="comment">// true</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="literal">NaN</span>].includes(<span class="literal">NaN</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h4 id="4-9-find-和-findIndex"><a href="#4-9-find-和-findIndex" class="headerlink" title="4.9 find() 和 findIndex()"></a>4.9 find() 和 findIndex()</h4><blockquote>
<p>find 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1</p>
</blockquote>
<ul>
<li><code>find</code> 方法，当某个元素通过 callback 的测试时，返回数组中的一个值，否则返回 undefined。</li>
<li><code>findIndex</code>方法，返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// find</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>].find(<span class="function">(<span class="params">n</span>) =&gt;</span> n &lt; <span class="number">0</span>); <span class="comment">// 返回元素-5</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>,<span class="literal">NaN</span>].find(<span class="function">(<span class="params">n</span>) =&gt;</span> <span class="built_in">Object</span>.is(<span class="literal">NaN</span>, n)); <span class="comment">// 返回元素NaN</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// findIndex</span></span><br><span class="line"><span class="keyword">let</span> a = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>].findIndex(<span class="function">(<span class="params">n</span>) =&gt;</span> n &lt; <span class="number">0</span>); <span class="comment">// 返回索引2</span></span><br><span class="line"><span class="keyword">let</span> b = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">-5</span>, <span class="number">10</span>,<span class="literal">NaN</span>].findIndex(<span class="function">(<span class="params">n</span>) =&gt;</span> <span class="built_in">isNaN</span>(n)); <span class="comment">// 返回索引4</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 稀疏数组</span></span><br><span class="line"><span class="keyword">let</span> a =[<span class="number">1</span>,,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">a.find(<span class="function">(<span class="params">n</span>) =&gt;</span> &#123;</span><br><span class="line">    </span><br><span class="line">    <span class="built_in">console</span>.log(index++) <span class="comment">//0,1,2 第二次是empty也会调用一次，而且返回为true，立即退出</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> n === <span class="number">3</span>;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="4-10-其他"><a href="#4-10-其他" class="headerlink" title="4.10 其他"></a>4.10 其他</h4><ul>
<li><code>keys()</code>方法返回一个新的Array迭代器，它包含数组中每个索引的键</li>
<li><code>values()</code> 方法返回一个新的Array迭代器，它包含数组中每个索引的值</li>
<li><code>entries()</code>方法返回一个新的Array迭代器，该对象包含数组中每个索引的键/值对</li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2018/08/13/immutable-review/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2018/08/21/quick-app-summary/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
